<!DOCTYPE html>
<html>
   <head>
      <title>主页</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- 引入 Bootstrap -->
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
       <script src="https://code.jquery.com/jquery.js"></script>
       <!-- 包括所有已编译的插件 -->
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body style="padding-top: 90px;">
        <script type="text/javascript">
            function load(){//加载界面时数据加载
                $.ajax({
                    type:'',
                    url:"",
                    data:{

                    },
                    success:function(){

                    }
                })
            }
            function searchcomputer(){
                $.ajax({
                    type:'',
                    url:"",
                    data:{

                    },
                    success:function(){

                    },
                    error:function () {//弹窗，后面可以删除
                        alert("failed")
                    }
                })
            }
        </script>
        <div class="container-fluid">
        <!--导航栏-->
            <div class="row-fluid">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #660066;">
                        <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" style="margin-left: 20px;color: rgb(255, 255, 255);" href="home.html">主页</a>
                        </div>
                        <div>
                            <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size: 18px;margin-left: 40px;color: rgb(255, 255, 255);">硬件信息 
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" style="background-color: #660066;">
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">CPU</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">显卡</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">内存</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">硬盘</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">笔记本</a></li>
                                </ul>
                            </li>
                            </ul>
                        </div>
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" style="margin-left: 40px;color: rgb(255, 255, 255);">社区交流</a>
                        </div>
                        <div>
                            <form class="navbar-form navbar-left" role="search" style="margin-left: 650px;">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="输入查找的内容" style="width: 300px;">
                            </div>
                            <a href="https://www.baidu.com/">
                                <img src="search.png" width="35px" height="35px">
                            </a>
                            </form>
                        </div>
                        <div>
                            <a href="https://www.baidu.com/"><img src="头像.png" style="width: 37px;margin-top: 8px;"></a>
                        </div>
                        </div>
                    </nav>
            </div>

            <div class="row-fluid">
                <!--左端功能页面栏-->
                <div class="col-md-2" style="margin-left:0px;margin-top:40px;">
                    <div class="panel-group" id="accordion" >
                        <div class="panel panel-default" >
                            <div class="panel-heading" style="background-color: purple;">
                                <h5 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">                     
                                        <h5><span class="glyphicon glyphicon-th-list" style="color: rgb(231, 237, 238); font-size: 20px;"> 功能页面</span></h5>
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div class="list-group">
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="热点资讯.html">热点资讯</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="硬件匹配.html">硬件匹配</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="key_word_search.html">关键字匹配</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="电脑猎场.html">电脑猎场</a>
                                    </div>     
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--内容界面-->
                <div class="col-md-10" style="margin-top:40px;border:solid 3px purple;">
                    <br/>
					<div class="row">
                    	<button id = "key1" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:2%;display:inline-block;width: 150px;height: 150px;background-color: #CCEBF8;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">打代码</font></button>
						<button id = "key2" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:30%;display:inline-block;width: 150px;height: 150px;background-color: #FFCCCC;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">续航</font></button>
						<button id = "key3" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:30%;display:inline-block;width: 150px;height: 150px;background-color: #CCCCFF;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">打游戏</font></button>
                    </div>
					<div class="row">
						<button id = "key4" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:25%;display:inline-block;width: 150px;height: 150px;background-color: #CCCCFF;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">制图</font></button>
						<button id = "key5" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:25%;display:inline-block;width: 150px;height: 150px;background-color: #CCEBF8;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">散热</font></button>
					</div>
					<div class="row">
						<button id = "key6" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:12.5%;display:inline-block;width: 150px;height: 150px;background-color: #FFCCCC;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">商务本</font></button>
						<button id = "key7" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:20%;display:inline-block;width: 150px;height: 150px;background-color: #CCCCFF;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">大屏幕</font></button>
						<button id = "key8" onclick="addkey(this.id)" type="button" class="btn btn-primary" style="margin-left:25%;width: 150px;height: 150px;background-color: #CCEBF8;border-radius:100%;border: none"><font style="font-size:40px;" color="#660066">轻薄</font></button>
					</div>
					<br/>
					<br/>
					<h3 style="display:inline-block;"><span id = "keyword1" class="label label-default" style="background-color: #CCEBF8;color: #660066;">无</span></h3>
					<h3 style="display:inline-block;"><span id = "keyword2" class="label label-default" style="background-color: #FFCCCC;color: #660066;">无</span></h3>
					<h3 style="display:inline-block;"><span id = "keyword3" class="label label-default" style="background-color: #CCCCFF;color: #660066;">无</span></h3>
					<a href="" style="margin-left:50%"><font style="font-size:25px;" color="#169BD5">没有找到关键字？换一批</font></a>
					<br/>
					<br/>
					<button onclick="searchcomputer()" type="button" class="btn btn-primary" style="margin-left: 40%;width: 80px;height: 40px;background-color: #FFCCCC;color: #660066;border: none"><strong>查找</strong></button>
					<button onclick="nclear()" type="button" class="btn btn-primary" style="margin-left: 10%;width: 80px;height: 40px;background-color: #CCCCFF;color: #660066;border: none"><strong>清空</strong></button>
					<br/>
				</div>
            </div>
        </div>
		<script src="js/key_word.js"></script>
    </body>
</html>